<!DOCTYPE html>
<html>
	<head>
		<title>站点变量</title>
	    $css()
	    <style type="text/css">
            .top {
                background: #F5F5F5;
                height: 30px;
            }

                .top .rgt {
                    position: absolute;
                    right: 1em;
                    top: 5px;
                }

                .top ul {
                    list-style: none;
                    margin: 0;
                    padding: 0;
                    line-height: 30px;
                }

                    .top ul li {
                        float: left;
                        font-weight: bold;
                        padding: 0 1em;
                    }

                        .top ul li.current {
                            background: #167CD2;
                            color: #FFF;
                        }

            .data-table thead td {
                background: #EEE;
                padding: 5px 0;
                text-align: center;
                border-right: solid 1px #ddd;
            }

            .data-table tbody td {
                background: #FFF;
                padding: 3px 0;
                border-right: solid 1px #ddd;
                border-top: solid 1px #ddd;
                text-align: center;
            }

                .data-table tbody td.key {
                    text-align: left;
                    padding: 0 10px;
                }
                .data-table tbody input {
                    line-height: 1.4em;
                    width: 80%;
                    margin: 1px auto;
                    color: #666;
                }
                .data-table tbody input:focus {
                    margin: 1px auto;
                }
            .data-panel .panel {
                overflow: auto;
                border-bottom: solid 1px #ddd;
            }

    	</style>
	</head>
<body style="overflow-y: hidden">

<div class="top">
    <ul>
        <li class="current">站点变量</li>
    </ul>
    <div class="rgt">

        &nbsp;&nbsp;创建新的键：<input type="text" id="keyName" class="tb_normal ui-box" onfocus="this.value=''" style="width: 120px; line-height: 1.4em"/>
        <span class="ui-button w50 small-button" id="btn_create">
            <span class=" button-inner">
                <span class="button-txt">创建</span>
                <input type="button" />
            </span>
        </span>
      

        <!--
        <span class="ui-button small-button">
              <span class=" button-inner">
                  <span class="button-txt">导入</span>
                  <a href="javascript:;" class="fn" fn="download"></a>
              </span>
          </span>-->
    </div>
</div>

<div class="data-panel" id="locale-data">
    <table width="100%" class="data-table" cellspacing="0" style="border-top: solid 1px #167CD2;">
        <thead id="thead">
        <tr>
            <td class="fix-col" style="width: 20%; text-align: left;"><span style="padding-left: 10px;"><b>键</b>(字母排序)</span></td>
            <td class="fix-col">值</td>
            <td class="fix-col" style="width:30%">备注</td>
            <td class="fix-col" style="width:200px">操作</td>
        </tr>
        </thead>
        <tbody id="tbody"></tbody>
    </table>

    <div class="panel" id="locale-data-list">
        <table width="100%" class="data-table" cellspacing="0">
        
        </table>
    </div>
</div>

$js()
<script type="text/javascript">
    var currentType = "custom";
    var langCount = 2;
    var tby = jr.$('tbody');
    var rowTpl = '<tr>' +
        '<td class="key" style="min-width: 120px;" id="${Id}"><b><span field="name">{Name}</span></b></td>' +
        '<td><input class="id" field="id" type="hidden" value="{Id}"/>' +
        '<input type="text" class="ui-box tb_normal value" field="value" value="{Value}"/></td>' +
        '<td><input type="text" class="ui-box tb_normal remark" field="remark" value="{Remark}"/></td>' +
        '<td width="40px"><a href="javascript:;" onclick="delKey(\'{Id}\')">删除</a> &nbsp;&nbsp;' +
        '<a href="javascript:;" class="btn_save">保存</a></td></tr>';
    function writeToBody(d) {
        if (d == null)return;
        var html = '';
        for (var i = 0; i < d.length; i++) {
            console.log("---",d[i]);
            html += jr.template(rowTpl, d[i]);
        }
        tby.innerHTML = html;
        if (d.length > 0) {
          //  fixTitRow();
        }

        jr.$fn('.btn_save').click(function () {
            console.log(this.parent().parent().html());
            var data = jr.json.toObject(this.parent().parent().elem());
            var t = this;
            t.disabled = true;
            jr.xhr.jsonPost('?xhr=1&module=site&action=SaveVariable', data, function (r) {
                t.disabled = false;
                if (r.result) {
                    jr.dialog.alert('保存成功', function () { loadKeys(currentType); });
                } else {
                    jr.dialog.alert(r.message);
                }
            });
        });

    }
    
    function loadKeys(type) {
        jr.xhr.jsonPost('?xhr=1&module=site&action=GetVariablesJson', { type: type }, function(d) {
            writeToBody(d);
        });
    }
    loadKeys(currentType);
    jr.$('btn_create').onclick = function() {
        var key = jr.$('keyName').value;
        jr.xhr.jsonPost("?xhr=1&module=site&action=CreateVariable", { key: key }, function(r) {
            if (r.result) {
                showMsg2('创建成功');
                loadKeys(currentType);
                location.href = '#' + Key;
            } else {
                jr.dialog.alert(r.message);
            }
        });
    };
    
    function delKey(k) {
        jr.dialog.confirm('请在删除之前，确定是否保存更改？', function(b) {
            if (b) {
                jr.xhr.jsonPost("?xhr=1&module=site&action=DeleteVariable", { id: k }, function (r) {
                    if (r.result) {
                        jr.dialog.alert('删除成功', function () { loadKeys(currentType); });
                    } else {
                        jr.dialog.alert(r.message);
                    }
                });
            }
        });
    }
</script>
</body>
</html>